<template>
  <diV class="DataTable_main_box_css">
    <div class="DataTable_content_box_css">
      <el-table :data="tableData" border style="width: 100%;height: 100%;">
        <el-table-column type="selection" width="50"/>
        <el-table-column label="id" width="60">
          <template #default="scope">
            <div>
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程名" width="250">
          <template #default="scope">
            <div>
              <span>{{ scope.row.courseName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程封面" width="250">
          <template #default="scope">
            <div>
              <!-- <span>{{ scope.row.name }}</span> -->
              <img :src="scope.row.courseCover" style="width: 11vw;height: 10vh;"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程上传人" width="100">
          <template #default="scope">
            <div>
              <span>{{ scope.row.courseUp}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程上传时间" width="200">
          <template #default="scope">
            <div>
              <span>{{ scope.row.courseDate }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程简介" width="500">
          <template #default="scope">
            <div>
              <span>{{ scope.row.courseInformation}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="DataTablehandleEdit(scope.row.id, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
              >修改</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="DataTablehandleDelete(scope.id, scope.row)" style="width: 4vw; height: 3vh;"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="DataTable_From_box_css" v-show="DataTable_From_Show">
      <div class="DataTable_from_content_box_css">
          <!-- <b style="font-size: 2vw;margin-left: 10vw;margin-top: 5vh;">文章管理</b> -->
          <!-- <div style="margin: 5vh auto;width: ;"></div> -->
            <el-form :label-position="labelPosition" label-width="80px" :model="DataTableformLabelAlign" style="margin: 5vh auto;width: 75%;height: 90%;">
              <el-form-item label="课程名">
                  <el-input v-model="DataTableformLabelAlign.course_name"></el-input>
                </el-form-item>
                <el-form-item label="上传人">
                  <el-input v-model="DataTableformLabelAlign.course_up"></el-input>
                </el-form-item>
                <el-form-item label="上传时间">
                  <el-input v-model="DataTableformLabelAlign.course_Date"></el-input>
                </el-form-item>
                <el-form-item label="课程简介">
                  <el-input type="textarea" v-model="DataTableformLabelAlign.course_information"></el-input>
                </el-form-item>
                <el-form-item label="课程封面">
                  <el-input v-model="DataTableformLabelAlign.courseCover"></el-input>
                </el-form-item>
                <el-form-item label="是否收费">
                  <el-input v-model="DataTableformLabelAlign.member"></el-input>
                </el-form-item>
                <el-form-item label="课程分类">
                  <el-input v-model="DataTableformLabelAlign.classification"></el-input>
                </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="updateCourse(DataTableformLabelAlign)">确定修改</el-button>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="DataTabledeleteEdit">放弃修改</el-button>
              </el-form-item>
            </el-form>
        </div>
    </div>
  </diV>
</template>
  
  <script>
  import axios from 'axios'
  export default {
    name:'DataTable',
    data(){
      return{
        DataTable_From_Show:false,
        CourseId:1,
        tableData:[
        ],
        DataTableimageUrl: '',
        DataTableArticleId:2,
        DataTableformLabelAlign: {
              course_Id: 0,
              course_name: '',
              course_up: '',
              course_Date: '',
              course_information:'',
              courseCover:'',
              member:0,
              classification:0
        },
      }
    },
    methods:{
      DataTablehandleEdit(index,row){
        this.DataTable_From_Show=true
        this.DataTableformLabelAlign.Course_Id=index
        this.DataTableformLabelAlign.course_name=row.courseName
        this.DataTableformLabelAlign.course_up=row.courseUp
        this.DataTableformLabelAlign.course_information=row.courseInformation
        this.DataTableformLabelAlign.courseCover=row.courseCover
        this.DataTableformLabelAlign.member=row.member
        this.DataTableformLabelAlign.classification=row.classification
        this.DataTableformLabelAlign.course_Date=row.courseDate
      },
      DataTablehandleDelete(index,row){
        var that=this
          axios.get('http://127.0.0.1/DeleteCourse',{params:{
            CourseId:row.id
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("删除成功")
              that.$router.go(0)
            }else{
              alert("删除失败")
            }
          }).catch(function(error){
            alert("系统出错")
          })
      },
      DataTabledeleteEdit(){
        this.DataTable_From_Show=false
        var that=this
      },
      updateCourse(DataTableformLabelAlign){
          var that=this
          axios.get('http://127.0.0.1/UpdateCourse',{params:{
            CourseId:that.DataTableformLabelAlign.Course_Id,
            courseCover:DataTableformLabelAlign.courseCover,
            courseName:DataTableformLabelAlign.course_name,
            courseUp:DataTableformLabelAlign.course_up,
            courseInformation:DataTableformLabelAlign.course_information,
            member:DataTableformLabelAlign.member,
            classification:DataTableformLabelAlign.classification,
            courseDate:DataTableformLabelAlign.course_Date
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("修改成功")
              that.$router.go(0)
            }else{
              alert("修改失败")
            }
          }).catch(function(error){
            console.log(error)
            alert("系统出错")
          })
      },
  },
  mounted(){
    var that=this
    axios.get('http://127.0.0.1/Course')
    .then(function(res){
      for(var i=0;i<res.data.length;i++){
        that.tableData.push(res.data[i])
      }
    })
    .catch(function(error){
      console.log(error)
    })
    // console.log(JSON.parse(sessionStorage.getItem('vuex')).state1)
    // console.log(JSON.parse(sessionStorage))
    console.log(JSON.parse(sessionStorage.getItem('vuex')))
  }
}
  </script>
<style>
  .DataTable_main_box_css{
    position: relative;
    width: 83vw;
    height: 86vh;
  }
  .DataTable_content_box_css{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .DataTable_From_box_css{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .DataTable_from_content_box_css{
    position: absolute;
    top:7vh;
    left: 24vw;
    width: 40%;
    height: 85%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
  }
</style>